<template>
    <view class="box">
        <!-- 引入 nav-bar 组件，并传递页面标题 -->
        <nav-bar :navTitle="navTitle" />
		
        <!-- components/CarNumber/index.wxml -->
        <!-- 车牌号输入框 -->
        <view class="inputs custom-input-class">
            <view :class="'inputs-item custom-item-class ' + (currentInput === 0 ? 'item-active' : '')" @tap="showProvinceBoard">{{ carNum[0] }}</view>
            <view :class="'inputs-item custom-item-class ' + (currentInput === 1 ? 'item-active' : '')" @tap="showAreaBoard">{{ carNum[1] }}</view>
            <view class="split">·</view>
            <view :class="'inputs-item custom-item-class ' + (currentInput === 2 ? 'item-active' : '')" @tap="showNumberBoard" :data-index="2">{{ carNum[2] }}</view>
            <view :class="'inputs-item custom-item-class ' + (currentInput === 3 ? 'item-active' : '')" @tap="showNumberBoard" :data-index="3">{{ carNum[3] }}</view>
            <view :class="'inputs-item custom-item-class ' + (currentInput === 4 ? 'item-active' : '')" @tap="showNumberBoard" :data-index="4">{{ carNum[4] }}</view>
            <view :class="'inputs-item custom-item-class ' + (currentInput === 5 ? 'item-active' : '')" @tap="showNumberBoard" :data-index="5">{{ carNum[5] }}</view>
            <view :class="'inputs-item custom-item-class ' + (currentInput === 6 ? 'item-active' : '')" @tap="showNumberBoard" :data-index="6">{{ carNum[6] }}</view>
            <view :class="'inputs-item custom-item-class ' + (currentInput === 7 ? 'item-active' : '')" @tap="showNumberBoard" :data-index="7">
                <text class="new" v-if="!carNum[7]">+</text>
                <text v-else>{{ carNum[7] }}</text>
            </view>
            <!-- <view wx:if="{{ !newEnergy }}" class="inputs-item custom-item-class new-energy" bind:tap="changeCarToNewEnergy">
    <text class="new">+</text>
  </view>
  <view wx:else class="inputs-item custom-item-class {{ currentInput === 7 ? 'item-active' : '' }}" bind:tap="showLastBoard">{{ carNum[7] }}</view> -->
        </view>

        <button @tap="submit" class="btn" :disabled="btn">查询并交费</button>
        <view class="shuoming">
            <text>交费记录</text>
            <text>购买时长</text>
        </view>
        <!-- 虚拟键盘 -->
        <view class="keyboard" v-if="keyboard">
            <view class="keyboardClose">
                <view class="keyboardClose_btn" @tap="closeKeyboard">关闭</view>
            </view>
            <!-- 省份简写键盘 -->
            <view class="keyboard-item" v-if="keyboardType === 1">
                <view class="keyboard-line" v-for="(item, index) in provinces" :key="index">
                    <view class="keyboard-btn" :data-val="itemlist" @tap="chooseProvince" v-for="(itemlist, index1) in item" :key="index1">
                        {{ itemlist }}
                    </view>
                </view>
                <view class="keyboard-del" @tap="delProvince">
                    <text>清除</text>
                </view>
            </view>
            <!-- 地区简写键盘 -->
            <view class="keyboard-item" v-if="keyboardType === 2">
                <view class="keyboard-line" v-for="(item, index) in areas" :key="index">
                    <view class="keyboard-btn" :data-val="itemlist" @tap="chooseArea" v-for="(itemlist, index1) in item" :key="index1">
                        {{ itemlist }}
                    </view>
                </view>
                <view class="keyboard-del" @tap="delArea">
                    <text>清除</text>
                </view>
            </view>
            <!-- 普通类型键盘 -->
            <view class="keyboard-item" v-if="keyboardType === 3">
                <view class="keyboard-line" v-for="(item, index) in numbers" :key="index">
                    <view class="keyboard-btn" :data-val="itemlist" @tap="chooseNumber" v-for="(itemlist, index1) in item" :key="index1">
                        {{ itemlist }}
                    </view>
                </view>
                <view class="keyboard-del" @tap="delNumber">
                    <text>清除</text>
                </view>
            </view>
            <!-- 最后一位键盘 -->
            <view class="keyboard-item" v-if="keyboardType === 4">
                <view class="keyboard-line" v-for="(item, index) in last" :key="index">
                    <view class="keyboard-btn" :data-val="itemlist" @tap="chooseLast" v-for="(itemlist, index1) in item" :key="index1">
                        {{ itemlist }}
                    </view>
                </view>
                <view class="keyboard-del" @tap="delLast">
                    <text>清除</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// components/CarNumber/index.js
export default {
    data() {
        return {
            carNum: [],
            currentInput: 0,
            keyboard: false,
            keyboardType: 1,
            newEnergy: false,

            // 省份输入
            provinces: [
                ['京', '沪', '粤', '津', '冀', '晋', '蒙', '辽', '吉', '黑'],
                ['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘'],
                ['桂', '琼', '渝', '川', '贵', '云', '藏'],
                ['陕', '甘', '青', '宁', '新']
            ],

            // 地区输入
            areas: [
                ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K'],
                ['L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V'],
                ['W', 'X', 'Y', 'Z']
            ],

            // 车牌输入
            numbers: [
                ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
                ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K'],
                ['L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V'],
                ['W', 'X', 'Y', 'Z']
            ],

            // 最后一位输入
            last: [
                ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
                ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M'],
                ['N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
                ['港', '澳', '学', '挂', '警']
            ],

            name: '',
            btn: '',
			// 设置页面标题
			navTitle: '停车交费B2C'
        };
    },
    /**
     * 自定义样式
     */
    externalClasses: ['custom-input-class', 'custom-item-class', 'custom-energy-icon'],
    /**
     * 组件的属性列表
     */
    props: {
        defaultNum: {
            type: String,
            default: ''
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {
		submit(){
			console.log('点击查询并缴费');
			// 判断是否有权限 无权限02、包时 00、包月01
			if (uni.getStorageSync('paymentType')=='02' ) {
			    uni.showToast({
			        title: '无权限，请联系商管！',
			        icon: 'none'
			    });
			    return;
			}else{
				uni.navigateTo({
					url: '/pages/carnumber/pay'
				});
			}
		},
        handlePageShow() {
            if (this.defaultNum) {
                // 存在默认车牌号
                const length = this.defaultNum.length;
                if (length === 8) {
                    // 新能源车牌号
                    this.setData({
                        newEnergy: true
                    });
                }
                this.setData({
                    carNum: this.defaultNum.split('')
                });
            }
        },

        /**
         * 关闭键盘
         */
        closeKeyboard() {
            this.setData({
                keyboard: false
            });
        },

        /**
         * 显示省份键盘
         */
        showProvinceBoard() {
            this.setData({
                keyboard: true,
                currentInput: 0,
                keyboardType: 1
            });
        },

        /**
         * 确定选择省份
         */
        chooseProvince(event) {
            const { val } = event.currentTarget.dataset;
            this.setData({
                'carNum[0]': val,
                currentInput: 1,
                keyboardType: 2
            });
            // 每次都触发 change 事件，通知父组件
            this.$emit('change', {
                detail: this.carNum.join('')
            });
        },

        /**
         * 删除选定省份
         */
        delProvince() {
            this.setData({
                'carNum[0]': ''
            });
            // 每次都触发 change 事件，通知父组件
            this.$emit('change', {
                detail: this.carNum.join('')
            });
        },

        /**
         * 显示地区键盘
         */
        showAreaBoard() {
            this.setData({
                keyboard: true,
                currentInput: 1,
                keyboardType: 2
            });
        },

        /**
         * 选定地区
         */
        chooseArea(event) {
            const { val } = event.currentTarget.dataset;
            this.setData({
                'carNum[1]': val,
                currentInput: 2,
                keyboardType: 3
            });
            // 每次都触发 change 事件，通知父组件
            this.$emit('change', {
                detail: this.carNum.join('')
            });
        },

        /**
         * 删除选定区域
         */
        delArea() {
            this.setData({
                'carNum[1]': '',
                currentInput: 0,
                keyboardType: 1
            });
            // 每次都触发 change 事件，通知父组件
            this.$emit('change', {
                detail: this.carNum.join('')
            });
        },

        /**
         * 显示普通键盘
         */
        showNumberBoard(event) {
            const { index } = event.currentTarget.dataset;
            //const keyboardType = index === 6 && !this.data.newEnergy ? 4 : 3
            const keyboardType = index === 6 || index === 7 ? 4 : 3;
            this.setData({
                keyboard: true,
                currentInput: index,
                keyboardType: keyboardType
            });
        },

        /**
         * 选定车牌
         */
        chooseNumber(event) {
            const { val } = event.currentTarget.dataset;
            const name = 'carNum[' + this.currentInput + ']';
            this.setData({
                [name]: val,
                currentInput: this.currentInput + 1,
                keyboardType: 3
            });
            // 跳到最后一位时，键盘不一样
            if (this.currentInput === 6 && !this.newEnergy) {
                this.setData({
                    keyboardType: 4
                });
            } else if (this.currentInput === 7 && this.newEnergy) {
                this.setData({
                    keyboardType: 4
                });
            }
            // 每次都触发 change 事件，通知父组件
            this.$emit('change', {
                detail: this.carNum.join('')
            });
        },

        /**
         * 删除车牌
         */
        delNumber() {
            const name = 'carNum[' + this.currentInput + ']';
            this.setData({
                [name]: '',
                currentInput: this.currentInput - 1,
                keyboardType: 3
            });
            // 如果删除到地区时，切换键盘类型
            if (this.currentInput === 1) {
                this.setData({
                    keyboardType: 2
                });
            }
            // 每次都触发 change 事件，通知父组件
            this.$emit('change', {
                detail: this.carNum.join('')
            });
        },

        /**
         * 显示最后一位键盘
         */
        showLastBoard() {
            //if (this.data.newEnergy) {
            if (this.currentInput == 7) {
                // 新能源
                this.setData({
                    keyboard: true,
                    currentInput: 7,
                    keyboardType: 4
                });
            } else {
                this.setData({
                    keyboard: true,
                    currentInput: 6,
                    keyboardType: 4
                });
            }
        },

        /**
         * 选定最后一位
         */
        chooseLast(event) {
            const { val } = event.currentTarget.dataset;
            // if (this.data.newEnergy)
            if (this.currentInput == 7) {
                // 新能源
                this.setData({
                    'carNum[7]': val,
                    currentInput: this.currentInput + 1,
                    keyboard: false
                });
            } else {
                this.setData({
                    'carNum[6]': val,
                    currentInput: this.currentInput + 1,
                    keyboard: false
                });
            }
            // 每次都触发 change 事件，通知父组件
            this.$emit('change', {
                detail: this.carNum.join('')
            });
        },

        /**
         * 删除最后一位
         */
        delLast() {
            if (this.newEnergy) {
                this.setData({
                    'carNum[7]': '',
                    currentInput: this.currentInput - 1,
                    keyboardType: 3
                });
            } else {
                this.setData({
                    'carNum[6]': '',
                    currentInput: this.currentInput - 1,
                    keyboardType: 3
                });
            }
            // 每次都触发 change 事件，通知父组件
            this.$emit('change', {
                detail: this.carNum.join('')
            });
        },

        /**
         * 切换输入新能源车牌号
         */
        changeCarToNewEnergy() {
            this.setData({
                newEnergy: true
            });
        }
    },
    created: function () {}
};
</script>
<style>
/* components/CarNumber/index.wxss */
    /* 引入HarmonyOS Sans字体 */
    @font-face {
        font-family: 'HarmonyOS Sans';
        src: url('/static/fonts/HarmonyOS_Sans_Bold.ttf') format('truetype'); /* 请根据实际字体文件路径和格式修改 */
        font-weight: 500;
        font-style: normal;
    }

.box {
        width: 700rpx;
        margin: 0 auto;
        padding-top: 200rpx; /* 进一步增大顶部内边距，给.top 留出更多空间 */
    }
.inputs {
    display: flex;
    align-items: center;
    width: 700rpx;
    margin: 150rpx auto 80rpx auto;
    justify-content: center;
}

.split {
    font-weight: bold;
}

.inputs-item {
    border: 1rpx solid #8d8d8d;
    border-radius: 12rpx;
    margin: 10rpx;
    width: 68rpx;
    font-size: 48rpx;
    text-align: center;
    height: 86rpx;
    line-height: 86rpx;
}

.new-energy {
    display: flex;
    align-items: center;
}

.new-energy-img {
    height: 71rpx;
    width: 68rpx;
    margin: 10rpx;
    border: none;
}

.item-active {
    border: 2rpx solid #ff6e00;
    color: #ff6e00;
}

.keyboard {
    position: fixed;
    bottom: 0;
    /* height: 45vh; */
    background-color: #d1d5d9;
    width: 100%;
    left: 0;
    padding-bottom: 10rpx;
}

/* 关闭虚拟键盘 */
.keyboardClose {
    height: 70rpx;
    background-color: #f7f7f7;
    overflow: hidden;
}

.keyboardClose_btn {
    float: right;
    line-height: 70rpx;
    font-size: 15px;
    padding-right: 30rpx;
}

.keyboard-line {
    display: flex;
    justify-content: center;
}

/* 虚拟键盘-单个按钮 */
.keyboard-btn {
    font-size: 32rpx;
    color: #333333;
    background: #fff;
    display: inline-block;
    padding: 16rpx;
    text-align: center;
    box-shadow: 0 2rpx 0 0 #999999;
    border-radius: 10rpx;
    margin: 5rpx 5rpx;
}

/* 虚拟键盘-删除按钮 */
.keyboard-del {
    font-size: 32rpx;
    color: #333333;
    background: #a7b0bc;
    display: inline-block;
    padding: 16rpx;
    box-shadow: 0 2rpx 0 0 #999999;
    border-radius: 10rpx;
    margin: 3rpx;
    position: absolute;
    bottom: 10rpx;
    right: 10rpx;
}

.btn {
    width: 610rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    border-radius: 50rpx;
    background: #ff6e00;
    color: #fff;
    font-size: 36rpx;
    margin-top: 100rpx;
}

.shuoming {
    width: 610rpx;
    margin: 0 auto;
    font-size: 28rpx;
    font-weight: 250;
    text-align: right;
    font-weight: 300;
    margin-top: 100rpx;
    color: rgb(0, 0, 0);
}

.shuoming text {
    margin-left: 40rpx;
}

.new {
    color: #999;
    text-align: center;
    font-size: 36rpx;
    width: 100%;
    vertical-align: top;
}
</style>
